 <template>
    <div>
        <section v-if="!showLoading" class="shop_container">
            <transition name="fade-choose">
                <section v-show="changeShowType =='food'" class="food_container">
                    <section class="menu_container">
                        <section class="menu_left" id="wrapper_menu" ref="wrapperMenu">
                            <ul>
                                <li v-for="(item,index) in menuList" :key="index" class="menu_left_li" :class="{activity_menu: index == menuIndex}" @click="chooseMenu(index)">
                                    <span>{{item.name}}</span>
                                </li>
                            </ul>
                        </section>
                        <section class="menu_right" ref="menuFoodList">
                            <ul>
                                <li v-for="(item,index) in menuList" :key="index">
                                   <header class="menu_detail_header">
                                        <section class="menu_detail_header_left">
                                            <strong class="menu_item_title">{{item.name}}</strong>
                                        </section>
                                    </header>
                                    <section v-for="(foods,foodindex) in item.productList" :key="foodindex" class="menu_detail_list">
                                        <div class="menu_detail_link">
                                            <section class="menu_food_img">
                                                <img :src="foods.imgUrl" style="border-radius:50%">
                                            </section>
                                            <section class="menu_food_description">
                                                <h3 class="food_description_head">
                                                    <strong class="description_foodname">{{foods.name}}</strong>

                                                </h3>
                                                <p class="food_description_content">{{foods.introduction}}</p>
                                               
                                                <div class="menu_detail_footer">
                                                    <section class="food_price">
                                                        <span>¥</span>
                                                        <span>{{foods.priceDescrip ? foods.priceDescrip : foods.price}}</span>
                                                        <!-- <span v-if="foods.specifications.length">起</span> -->
                                                    </section>
                                                </div>
                                            </section>
                                        </div>
                                      
                                    </section>
                                </li>
                            </ul>
                        </section>
                    </section>
                </section>
            </transition>
        </section>
       <section class="animation_opactiy shop_back_svg_container" v-if="showLoading">
          <span></span>
       </section>
			<div v-transfer-dom>
				<loading :show="showLoading" :text="'加载数据中'"></loading>
			</div>
    </div>
</template>

<script>
import {mapGetters, mapMutations,mapActions} from 'vuex'
import buyCart from '@/components/common/buyCart'
// import {imgBaseUrl} from '@/config/env'
import BScroll from 'better-scroll'
import {Loading,TransferDomDirective as TransferDom,XButton} from 'vux'
import {getStore} from '@/config/mUtils'
export default {
	directives: {
    TransferDom
  },
  data(){
    return{
      shopId: null, //商店id值
      showLoading: true, //显示加载动画
      changeShowType: 'food',//切换显示商品或者评价
      menuList: [], //食品列表
      menuIndex: 0, //已选菜单索引值，默认为0
      menuIndexChange: true,//解决选中index时，scroll监听事件重复判断设置index的bug
      shopListTop: [], //商品列表的高度集合
      showCartList: false,//显示购物车列表
      receiveInCart: false, //购物车组件下落的圆点是否到达目标位置
      preventRepeatRequest: false,// 防止多次触发数据请求
      foodScroll: null,  //食品列表scroll
      showSpecs: false,//控制显示食品规格
      showDeleteTip: false, //多规格商品点击减按钮，弹出提示框
      showMoveDot: [], //控制下落的小圆点显示隐藏
      windowHeight: null, //屏幕的高度
      elLeft: 0, //当前点击加按钮在网页中的绝对top值
      elBottom: 0, //当前点击加按钮在网页中的绝对left值
      tableId: null, //台桌号
	  tableName:  null, //台桌名
	  openId: null,  //openId,
	  orderType: null,  //是否扫码 还是直接进店   1 为扫码 2为直接进店,
      shopName: null ,//商户名
      type:null,
      contact: '',
      isBack: false
	}
  },
  created(){
    // 商铺id
    this.shopId = this.$route.query.shopId;
    // 台桌id
    this.tableId = this.$route.query.tableId
    // 台桌名
    this.tableName = this.$route.query.tableName
    //是否扫码 还是直接进店   1 为扫码 2为直接进店,
    this.orderType = this.$route.query.orderType

     this.type = this.$route.query.type
    // 商铺名
	this.shopName = this.$route.query.shopName
	// 设置页面标题
	this.setHeaderTitle(this.$route.query.shopName)
    // 获取openid
    this.openId = getStore('wxcode')
    // 根据本地缓存获取购物车数据
    this.INIT_BUYCART(this.$route.query.shopId);
    // 店家电话
    this.contact = this.$route.query.contact
    this.isBack = this.$route.query.isBack
    // 从服务器获取购物车信息。
    this.$http.get(`cart/shop/${this.$route.query.shopId}/user/${getStore('wxcode')}/get`)
      .then(({data})=>{
        if(data.status == 200){
          if(data.data !== null ){
			this.initCart({payload:data.data,shopId:this.$route.query.id})
		  }
        }
      }).catch(err=>{
        this.$vux.toast.show({
          type: 'warn',
          text: '获取购物车信息失败',
          time: 2000
        })
      })
  },
  mounted(){
    this.initData();
    this.windowHeight = window.innerHeight;
  },
  components: {
	buyCart,
	Loading,
    XButton
  },
  computed: {
    ...mapGetters({
        'products': 'cartProducts'
    }),
    //是否有选择商品。没有选择时按钮位不可选
    minimumOrderAmount: function () {
      if (this.totalNum !==0 && this.totalPrice !== 0) {
        return true
      }else{
        return false
      }
    },
    // 数量
	totalNum(){
	  let num = 0
	  this.products.map((item,i)=>{
		num += item.num
	  })
	  return num
	},
    //购物车中总共商品的总价
    totalPrice(){
      let total = 0
      this.products.map((item,i)=>{
        total += item.price*item.num
      })
     return total.toFixed(2)
    },
  },
  methods: {
    ...mapMutations([
      'INIT_BUYCART','CLEAR_CART'
    ]),
    ...mapActions([
	  'foodMenu',
	  'addToCart',
	  'removeToCart',
	  'initCart',
	   'setHeaderTitle',
       'setCoupon'
    ]),
    //初始化时获取基本数据
    async initData(){
    //获取商铺食品列表
	  this.menuList = await this.foodMenu(this.shopId)
      //隐藏加载动画
      this.hideLoading();
    },
    //获取食品列表的高度，存入shopListTop
    getFoodListHeight(){
      const listContainer = this.$refs.menuFoodList;
      const listArr = Array.from(listContainer.children[0].children);
      listArr.forEach((item, index) => {
		// 解决项目 li中定位不准确
		this.shopListTop[index] = item.offsetTop;
      });
      this.listenScroll(listContainer)
    },
    //当滑动食品列表时，监听其scrollTop值来设置对应的食品列表标题的样式
    listenScroll(element){
      this.foodScroll = new BScroll(element, {
        probeType: 3,
        deceleration: 0.001,
        bounce: false,
        swipeTime: 2000,
        click: true,
      });
      const wrapperMenu = new BScroll('#wrapper_menu', {
        click: true,
      });

      const wrapMenuHeight = this.$refs.wrapperMenu.clientHeight;
      this.foodScroll.on('scroll', (pos) => {
        if (!this.$refs.wrapperMenu) {
          return 
        }
        this.shopListTop.forEach((item, index) => {
          if (this.menuIndexChange && Math.abs(Math.round(pos.y)) >= item) {
              this.menuIndex = index;
              const menuList=this.$refs.wrapperMenu.querySelectorAll('.activity_menu');
              const el = menuList[0];
              wrapperMenu.scrollToElement(el, 800, 0, -(wrapMenuHeight/2 - 50));
            }
          })
        })
      },
      //点击左侧食品列表标题，相应列表移动到最顶层
      chooseMenu(index){
        this.menuIndex = index;
        //menuIndexChange解决运动时listenScroll依然监听的bug
        this.menuIndexChange = false;
        this.foodScroll.scrollTo(0, -this.shopListTop[index], 400);
        this.foodScroll.on('scrollEnd', () => {
            this.menuIndexChange = true;
        })
      },
       //根据商品id 添加入购物车
      addCart(foods){
        // 使用 vuex来添加管理数据流
		this.addToCart({payload:foods,shopId:this.shopId})
	  },
      //根据商品id 移除购物车
      removeCart(foods){
        this.removeToCart({payload:foods})
      },
      //控制购物列表是否显示
      toggleCartList(){
        this.products.length ? this.showCartList = !this.showCartList : true;
      },
      //清除购物车
      clearCart(){
        this.toggleCartList();
        this.CLEAR_CART();
        this.$http.post(`cart/shop/${this.shopId}/user/${this.openId}/delete/`)
          .then(({data})=>{
            this.$vux.toast.show({
			  type: 'success',
			  text: '已清空购物车',
			  time: 2000
		    })
          }).catch(err=>{
            alert('faild')
          })
      },
      //监听圆点是否进入购物车
      listenInCart(){
        if (!this.receiveInCart) {
          this.receiveInCart = true;
          this.$refs.cartContainer.addEventListener('animationend', () => {
            this.receiveInCart = false;
          })
          this.$refs.cartContainer.addEventListener('webkitAnimationEnd', () => {
            this.receiveInCart = false;
          })
        }
      },
      //隐藏动画
      hideLoading(){
        this.showLoading = false;
      },
      //显示提示，无法减去商品
      showReduceTip(){
        this.showDeleteTip = true;
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          clearTimeout(this.timer);
          this.showDeleteTip = false;
        }, 3000);
      },
      //显示下落圆球
      showMoveDotFun(showMoveDot, elLeft, elBottom){
        this.showMoveDot = [...this.showMoveDot, ...showMoveDot];
        this.elLeft = elLeft;
        this.elBottom = elBottom;
      },
      beforeEnter(el){
        el.style.transform = `translate3d(${this.elLeft-50}px,${37 + this.elBottom - this.windowHeight}px,0)`;
        el.children[0].style.transform = `translate3d(${this.elLeft - 30}px,0,0)`;
        el.children[0].style.opacity = 0;
      },
      afterEnter(el){
        el.style.transform = `translate3d(0,0,0)`;
        el.children[0].style.transform = `translate3d(0,0,0)`;
        el.style.transition = 'transform .55s cubic-bezier(0.3, -0.25, 0.7, -0.15)';
        el.children[0].style.transition = 'transform .55s linear';
        this.showMoveDot = this.showMoveDot.map(item => false);
        el.children[0].style.opacity = 1;
        el.children[0].addEventListener('transitionend', () => {
          this.listenInCart();
        })
        el.children[0].addEventListener('webkitAnimationEnd', () => {
          this.listenInCart();
        })
	  },
	  submitConfirm(){
		let path = '/goods/confirmOrder'
		let data = JSON.stringify(this.products)
		this.$http.post(`/cart/shop/${this.shopId}/user/${this.openId}/add/?selectJson=${data}`)
		  .then(res=>{
			if(res.data.status ==200){
            /*
            * params
            * tableId : 台桌id
            * total: 总价格
            * tableName: 台桌名
            * openId : 微信用户id
            * shopId: 商铺id
            * shopName: 商铺名字
            * orderType 订单类型
            
            */
            this.$http.get(`coupon/openId/${this.openId}/value/${Math.floor(this.totalPrice)}`)
                .then(({data})=>{
                    if(data.status == 200){
                        if(data.data !==null){
                            this.setCoupon(data.data);
                            this.$router.push({path:path,query:{tableId:this.tableId,total:this.totalPrice,tableName:this.tableName,openId:this.openId,orderType:this.orderType,shopId:this.shopId,shopName:this.shopName,type:this.type}});
                        }else{
                            let arr = {}
                            this.setCoupon(arr);
                            this.$router.push({path:path,query:{tableId:this.tableId,total:this.totalPrice,tableName:this.tableName,openId:this.openId,orderType:this.orderType,shopId:this.shopId,shopName:this.shopName,type:this.type}}); 
                        }
                    }
                }).catch(err=>{
                    this.$toast.show({
                        type: 'warn',
                        text: res.data.msg,
                        time: 2000
                    });
                });
			}
		  }).catch(err=>{
		    this.$toast.show({
			  type: 'warn',
			  text: res.data.msg,
			  time: 2000
			})
		  })
	  }
    },
    watch: {
      //showLoading变化时说明组件已经获取初始化数据，在下一帧nextTick进行后续操作
      showLoading: function (value){
        if (!value) {
          this.$nextTick(() => {
            this.getFoodListHeight();
          })
        }
      }
    }
  }
</script>
<style scoped>

@keyframes mymove{
0%{-webkit-transform:scale(1);transform:scale(1)
}
25%{-webkit-transform:scale(0.8);transform:scale(0.8)
}
50%{-webkit-transform:scale(1.1);transform:scale(1.1)
}
75%{-webkit-transform:scale(0.9);transform:scale(0.9)
}
100%{-webkit-transform:scale(1);transform:scale(1)
}
}
@-webkit-keyframes mymove{
0%{-webkit-transform:scale(1);transform:scale(1)
}
25%{-webkit-transform:scale(0.8);transform:scale(0.8)
}
50%{-webkit-transform:scale(1.1);transform:scale(1.1)
}
75%{-webkit-transform:scale(0.9);transform:scale(0.9)
}
100%{-webkit-transform:scale(1);transform:scale(1)
}
}
.shop_back_svg_container{
    position:fixed;
    width:100%;
    height:100%;
}
.shop_back_svg_container img{
    width:100%;
    height:100%;
}
.shop_container{
    display:flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    position:absolute;
    right:0;
    left:0;
    height:100%;
    top: 0px;
}
.goback{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:2rem;
    z-index:11;
    padding-top:0.2rem;
    padding-left:0.2rem;
}
.shop_detail_header{
    overflow:hidden;
    position:relative;
}
.shop_detail_header .header_cover_img{
    width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:9;
    -webkit-filter:blur(10px);
    filter:blur(10px);
}
.shop_detail_header .description_header{
    position:relative;
    z-index:10;
    background-color:rgba(119,103,137,0.43);
    padding:0.4rem 0 0.4rem 0.4rem;
    width:100%;
    overflow:hidden;
}
.shop_detail_header .description_header .description_top{
    display:flex
}
.shop_detail_header .description_header .description_top .description_left{
    margin-right:0.3rem
}
.shop_detail_header .description_header .description_top .description_left img{
    width:2.9rem;
    height:2.9rem;
    display:block;
    border-radius:0.15rem
}
.shop_detail_header .description_header .description_top .description_right{
    -webkit-box-flex:1;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1
}
.shop_detail_header .description_header .description_top .description_right .description_title{
    font-size:.8rem;
    color:#fff;
    font-weight:bold;
    width:100%;
    margin-bottom:0.3rem
}
.shop_detail_header .description_header .description_top .description_right .description_text{
    font-size:.5rem;
    color:#fff;
    margin-bottom:0.3rem
}
.shop_detail_header .description_header .description_top .description_right .description_promotion{
    font-size:.5rem;
    color:#fff;
    width:11.5rem
}
.shop_detail_header .description_header .description_top .description_arrow{
    position:absolute;
    top:50%;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
    right:0.3rem;
    z-index:11
}
.shop_detail_header .description_header .description_footer{
    display:flex;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
    margin-top:0.5rem;
    padding-right:1rem
}
.shop_detail_header .description_header .description_footer p{
    font-size:.5rem;
    color:#fff
}
.shop_detail_header .description_header .description_footer p span{
    color:#fff;
}
.shop_detail_header .description_header .description_footer p .tip_icon{
    padding:0 .04rem;
    border:0.025rem solid #fff;
    border-radius:0.1rem;
    font-size:.4rem;
    display:inline-block
}
.shop_detail_header .description_header .description_footer .ellipsis{
    -webkit-box-flex: 1;
}
.shop_detail_header .description_header .description_footer .footer_arrow{
    width:.45rem;
    height:.45rem;
    position:absolute;
    right:.3rem
}
.activities_details{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#262626;
    z-index:200;
    padding:1.25rem
}
.activities_details .activities_shoptitle{
    text-align:center;
    font-size:.8rem;
    color:#fff
}
.activities_details .activities_ratingstar{
    display:flex;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-transform:scale(2.2);
    -ms-transform:scale(2.2);
    transform:scale(2.2);
    margin-top:.7rem
}
.activities_details .activities_list{
    margin-top:1.5rem;
    margin-bottom:1rem;
    font-size:.5rem;
    color:#fff
}
.activities_details .activities_list li{
    margin-bottom:.2rem
}
.activities_details .activities_list li .activities_icon{
    padding:0 .02rem;
    display:inline-block;
    border:0.025rem solid #fff;
    border-radius:0.1rem
}
.activities_details .activities_list li span{
    color:#fff;
    line-height:.6rem
}
.activities_details .activities_shopinfo p{
    line-height:.7rem;
    font-size:.5rem;
    color:#fff
}
.activities_details .activities_title_style{
    text-align:center;
    margin-bottom:1rem
}
.activities_details .activities_title_style span{
    font-size:.5rem;
    color:#fff;
    border:0.025rem solid #555;
    padding:.2rem .4rem;
    border-radius:0.5rem
}
.activities_details .close_activities{
    position:absolute;bottom:1rem;
    position:absolute;left:50%;
    -webkit-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    transform:translateX(-50%)
}
.food_container{
    display:flex;
    -webkit-box-flex:1;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    /* padding-bottom:2rem */
}
.menu_container{
    display:flex;
    -webkit-box-flex:1;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    overflow-y:hidden;
    position:relative
}
.menu_container .menu_left{
    width:3rem
}
.menu_container .menu_left .menu_left_li{
    padding:.4rem .2rem;
    border-bottom:0.025rem solid #ededed;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    border-left:0.15rem solid #f8f8f8;
    position:relative
}
.menu_container .menu_left .menu_left_li img{
    width:.5rem;height:.6rem
}
.menu_container .menu_left .menu_left_li span{
    font-size:.46rem;color:#666
}
/* .menu_container .menu_left .menu_left_li .category_num{position:absolute;top:.1rem;right:.1rem;background-color:#ff461d;line-height:.6rem;text-align:center;border-radius:50%;border:0.025rem solid #ff461d;min-width:.6rem;height:.6rem;font-size:.5rem;color:#fff;font-family:Helvetica Neue,Tahoma,Arial
} */
.menu_container .menu_left .activity_menu{
    background-color:#fff
}
.menu_container .menu_left .activity_menu::before{
    content: "|";width: 2px;height:100%; color:#2e9670;left: -0.2rem;position: absolute; 
}
.menu_container .menu_left .activity_menu span:nth-of-type(1){
    font-weight:bold
}
.menu_container .menu_right{
    -webkit-box-flex:4;
    -webkit-flex:4;
    -ms-flex:4;
    flex:4;
    overflow-y:auto
}
.menu_container .menu_right .menu_detail_header{
    width:100%;
    padding:.4rem;
    position:relative;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center
}
.menu_container .menu_right .menu_detail_header .menu_detail_header_left{
    width:11rem;
    white-space:nowrap;
    overflow:hidden
}
.menu_container .menu_right .menu_detail_header .menu_detail_header_left .menu_item_title{
    font-size:.6rem;
    color:#666;
    font-weight:bold;
    vertical-align: middle;
}
.menu_container .menu_right .menu_detail_header .menu_detail_header_left .menu_item_description{
    font-size:.5rem;
    color:#999;
    width:30%;
    overflow:hidden;
    vertical-align: middle;
}

.menu_container .menu_right .menu_detail_header .description_tip{
    background-color:#39373a;
    opacity:0.95;
    font-size:.5rem;
    color:#fff;
    position:absolute;
    top:1.5rem;
    z-index:14;
    width:8rem;
    right:.2rem;
    padding:.5rem .4rem;
    border:1px;
    border-radius:.2rem
}
.menu_container .menu_right .menu_detail_header .description_tip span{
    color:#fff;
    line-height:.6rem;
    font-size:.55rem
}
.menu_container .menu_right .menu_detail_header .description_tip::after{
    content:'';
    position:absolute;
    width:.4rem;
    height:.4rem;
    background-color:#39373a;
    top:-.5rem;
    right:.7rem;
    -webkit-transform:rotate(-45deg) translateY(0.41rem);
    -ms-transform:rotate(-45deg) translateY(0.41rem);
    transform:rotate(-45deg) translateY(0.41rem)
}
.menu_container .menu_right .menu_detail_list{
    background-color:#fff;
    padding:.6rem .4rem;
    border-bottom:1px solid #f8f8f8;
    position:relative;
    overflow:hidden
}
.menu_container .menu_right .menu_detail_list .menu_detail_link{
    display:flex
}
.menu_container .menu_right .menu_detail_list .menu_detail_link .menu_food_img{
    margin-right:.4rem
}
.menu_container .menu_right .menu_detail_list .menu_detail_link .menu_food_img img{
    width:2rem;
    height:2rem;
    display:block
}
.menu_container .menu_right .menu_detail_list .menu_detail_link .menu_food_description{
    width:100%
}
.menu_container .menu_right .menu_detail_list .menu_detail_link .menu_food_description .food_description_head{
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
    margin-bottom:.1rem
}
.menu_container .menu_right .menu_detail_list .menu_detail_link .menu_food_description .food_description_head .description_foodname{
    font-size:.5rem;
    color:#333
}
.menu_container .menu_right .menu_detail_list .menu_detail_link .menu_food_description .food_description_head .attributes_ul{
    display:flex
}
 /* .menu_container .menu_right .menu_detail_list .menu_detail_link .menu_food_description .food_description_head .attributes_ul li{font-size:.3rem;padding:0 .1rem;border:1px solid #666;border-radius:0.3rem;-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)
}  */
.menu_container .menu_right .menu_detail_list .menu_detail_link .menu_food_description .food_description_head .attributes_ul li p{
    white-space:nowrap
}
.menu_container .menu_right .menu_detail_list .menu_detail_link .menu_food_description .food_description_head .attributes_ul .attribute_new{
    position:absolute;
    top:0;
    left:0;
    background-color:#4cd964;
    width:2rem;
    height:2rem;
    display:flex;
    -webkit-box-align:end;
    -webkit-align-items:flex-end;
    -ms-flex-align:end;
    align-items:flex-end;
    -webkit-transform:rotate(-45deg) translate(-0.1rem, -1.5rem);
    -ms-transform:rotate(-45deg) translate(-0.1rem, -1.5rem);
    transform:rotate(-45deg) translate(-0.1rem, -1.5rem);
    border:none;border-radius:0
}
.menu_container .menu_right .menu_detail_list .menu_detail_link .menu_food_description .food_description_head .attributes_ul .attribute_new p{
    font-size:.4rem;
    color:#fff;
    text-align:center;
    -webkit-box-flex:1;
    -webkit-flex:1;
    -ms-flex:1;flex:1
}
.menu_container .menu_right .menu_detail_list .menu_detail_link .menu_food_description .food_description_content{
    font-size:.42rem;
    color:#999;
}

.menu_container .menu_right .menu_detail_list .menu_detail_link .menu_food_description .food_activity{
    line-height:.4rem
}

.menu_container .menu_right .menu_detail_list .menu_detail_footer{
    display:-webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    margin-top: -0.34rem
}
.menu_container .menu_right .menu_detail_list .menu_detail_footer .food_price span{
    font-family:'Helvetica Neue',Tahoma,Arial
}
.menu_container .menu_right .menu_detail_list .menu_detail_footer .food_price span:nth-of-type(1){
    font-size:.42rem;
    color:#f60;
    margin-right:.05rem
}
.menu_container .menu_right .menu_detail_list .menu_detail_footer .food_price span:nth-of-type(2){
    font-size:.5rem;
    color:#f60;
    font-weight:bold;
    margin-right:.1rem
}

.buy_cart_container{
    position:fixed;
    background-color:#fff;
    bottom:0;
    left:0;
    z-index:13;
    display:flex;
    width:100%;
    height:1.6rem
}
.buy_cart_container .cart_icon_num{
    -webkit-box-flex:1;
    -webkit-flex:1;
    -ms-flex:1;flex:1
}
.buy_cart_container .cart_icon_num .cart_icon_container{
    display:-webkit-flex;
    background-color:#3d3d3f;
    position:absolute;
    padding:.42rem;
    border-radius:50%;
    left:.4rem;
    top:-.3rem;
}
.buy_cart_container .cart_icon_num .cart_icon_container .icon-shop{
    line-height:0.66rem;
    color: #fff;
}
.buy_cart_container .cart_icon_num .cart_icon_container .cart_list_length{
    position:absolute;
    top:.1rem;
    right:-.25rem;
    background-color:#ff0000;
    line-height:.4rem;
    text-align:center;
    border-radius:40%;
    border:0.025rem solid #ff461d;
    min-width:.6rem;
    height:.4rem;
    font-size:.3rem;
    color:#fff;
    font-family:Helvetica Neue,Tahoma,Arial
}
.buy_cart_container .cart_icon_num .move_in_cart{
    -webkit-animation:mymove .5s ease-in-out;
    animation:mymove .5s ease-in-out
}
.buy_cart_container .cart_icon_num .cart_icon_activity{
    background-color:#2e9671;
    line-height: 0.66rem;
}
.buy_cart_container .cart_icon_num .cart_icon_activity .icon-shop{
    color: #fff;
    line-height: 0.66rem;
}
.buy_cart_container .cart_icon_num .cart_num{
    position:absolute;top:56%;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
    left:2.5rem
}
.buy_cart_container .cart_icon_num .cart_num div{
    color:#ff0000;
}
.buy_cart_container .cart_icon_num .cart_num div:nth-of-type(1){
    font-size:.74rem;
    margin-bottom:.1rem
}
.buy_cart_container .cart_icon_num .cart_num div:nth-of-type(2){
    font-size:.4rem
}
.buy_cart_container .gotopay{
    position:absolute;
    right:0;
    background-color:#535356;
    width:3.6rem;
    height:100%;
    text-align:center;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center
}
.buy_cart_container .gotopay .gotopay_button_style{
    font-size:.5rem;
    color:#fff;
    font-weight:bold
}
.buy_cart_container .gotopay_acitvity{
    background-color:#2e9671
}
.cart_food_list{
    position:fixed;
    width:100%;
    padding-bottom:3.5rem;
    z-index:12;
    bottom:0;
    left:0;
    background-color:#fff
}
.cart_food_list header{
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    padding:.1rem .6rem;
    background-color:#eceff1
}
.cart_food_list header svg{
    width:.6rem;
    height:.6rem;
    vertical-align:middle
}
.cart_food_list header p{
    font-size:.46rem;
    color:#666
}
.cart_food_list header .clear_cart{
    font-size:.46rem;
    color:#666;
    vertical-align: middle
}
.cart_food_list .cart_food_details{
    background-color:#fff;
    max-height:20rem;
    overflow-y:auto
}
.cart_food_list .cart_food_details .cart_food_li{
    display:-webkit-box;
    -webkit-box-align:center;
    -webkit-box-pack:center;
    padding:.6rem .5rem
}
.cart_food_list .cart_food_details .cart_food_li .cart_list_num{
    -webkit-box-flex: 1;
}
.cart_food_list .cart_food_details .cart_food_li .cart_list_num p:nth-of-type(1){
    font-size:.46rem;
    color:#666;
}
.cart_food_list .cart_food_details .cart_food_li .cart_list_num p:nth-of-type(2){
    font-size:.4rem;
    color:#666
}
.cart_food_list .cart_food_details .cart_food_li .cart_list_price{
    margin-right: 0.3rem;
}
.cart_food_list .cart_food_details .cart_food_li .cart_list_price span:nth-of-type(1){
    font-size:.6rem;
    color:#f60;
    font-family:Helvetica Neue,Tahoma
}
.cart_food_list .cart_food_details .cart_food_li .cart_list_price span:nth-of-type(2){
    font-size:.7rem;
    color:#f60;
    font-family:Helvetica Neue,Tahoma;
    font-weight:bold
}
.cart_food_list .cart_food_details .cart_food_li .cart_list_control{
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center
}
.cart_food_list .cart_food_details .cart_food_li .cart_list_control span{
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center
}
.cart_food_list .cart_food_details .cart_food_li .cart_list_control svg{
    width:.9rem;
    height:.9rem;
    fill:#3190e8
}
.cart_food_list .cart_food_details .cart_food_li .cart_list_control .specs_reduce_icon{
    fill:#999
}
.cart_food_list .cart_food_details .cart_food_li .cart_list_control .cart_num{
    font-size:.54rem;
    color:#666;
    min-width:1.76rem;
    text-align:center;
    font-family:Helvetica Neue,Tahoma;
    padding:0 0.2rem
}
.screen_cover{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:rgba(0,0,0,0.3);
    z-index:11
}
.change_show_type{
    display:flex;
    background-color:#fff;
    padding:0 0 .3rem;
    border-bottom:1px solid #ebebeb
}
.change_show_type div{
    -webkit-box-flex:1;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
}
.change_show_type div span{
    font-size:.65rem;
    color:#666;
    padding:.2rem .1rem;
    border-bottom:0.12rem solid #fff
}
.change_show_type div .activity_show{
    color:#000000;
    font-size: 0.52rem;
    font-weight: 700
}

.specs_cover{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0,0,0,0.4);z-index:17
}
.specs_list{
    position:fixed;
    top:35%;
    left:15%;
    width:70%;
    background-color:#fff;
    z-index:18;
    border:1px;
    border-radius:0.2rem
}
.specs_list .specs_list_header h4{
    font-size:.7rem;
    color:#222;
    font-weight:normal;
    text-align:center;
    padding:.5rem
}
.specs_list .specs_list_header .specs_cancel{
    position:absolute;
    right:.5rem;
    top:.5rem
}
.specs_list .specs_details{
    padding:.5rem
}
.specs_list .specs_details .specs_details_title{
    font-size:.6rem;
    color:#666
}
.specs_list .specs_details ul{
    display:flex;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    padding:.4rem 0
}
.specs_list .specs_details ul li{
    font-size:.6rem;
    padding:.3rem .5rem;
    border:0.025rem solid #ddd;
    border-radius:.2rem;
    margin-right:.5rem;
    margin-bottom:.2rem
}
.specs_list .specs_details ul .specs_activity{
    border-color:#3199e8;
    color:#3199e8
}
.specs_list .specs_footer{
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    background-color:#f9f9f9;
    padding:0.5rem;
    border:1px;
    border-bottom-left-radius:.2rem;
    border-bottom-right-radius:.2rem
}
.specs_list .specs_footer .specs_price span{
    color:#ff6000
}
.specs_list .specs_footer .specs_price span:nth-of-type(1){
    font-size:.5rem
}
.specs_list .specs_footer .specs_price span:nth-of-type(2){
    font-size:.8rem;
    font-weight:bold;
    font-family:Helvetica Neue,Tahoma
}
.specs_list .specs_footer .specs_addto_cart{
    width:4rem;
    height:1.3rem;
    background-color:#3199e8;
    border:1px;border-radius:0.15rem;
    font-size:.6rem;
    color:#fff;
    text-align:center;
    line-height:1.3rem
}
.show_delete_tip{
    position:fixed;
    top:50%;
    left:15%;
    width:70%;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
    background-color:rgba(0,0,0,0.8);
    z-index:18;
    font-size:.65rem;
    color:#fff;
    text-align:center;
    padding:.5rem 0;
    border:1px;
    border-radius:0.25rem
}
.move_dot{
    position:fixed;
    bottom:30px;
    left:30px
}
.move_dot svg{
    width:.9rem;
    height:.9rem;
    fill:#3190e8
}

.toggle-cart-enter-active,.toggle-cart-leave-active{
    -webkit-transition:all .3s ease-out;
    transition:all .3s ease-out
}
.toggle-cart-enter,.toggle-cart-leave-active{
    -webkit-transform:translateY(100%);
    -ms-transform:translateY(100%);
    transform:translateY(100%)
}
.icon-clear{
    vertical-align: middle;
    position: relative;
}
</style>